<template>
  <div class="page">
    <div class="container">
      <pub-search
        v-model:searchColumns="state.searchColumns"
        v-model:searchForm="state.searchForm"
        mask-append-to="table-container"
        @search="getPageData"
      >
        <template #leftBtn>
          <el-button
            type="primary"
            class="btn-table-add"
            :icon="Plus"
            @click="add('')"
          >
            新增
          </el-button>
        </template>
      </pub-search>
      <div class="table-container">
        <pub-table
          ref="pubTable"
          :column="columns"
          :data="tableData"
          :loading="tableLoading"
        >
          <template v-slot:switch="scope">
            <el-switch
              :before-change="beforeChangeColumn"
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="changeStatus(scope.row)"
            />
          </template>
          <template v-slot:option="scope">
            <el-button
              class="btn-row-edit"
              plain
              type="success"
              @click="edit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              plain
              class="btn-row-del"
              type="danger"
              @click="del(scope.row)"
            >
              删除
            </el-button>
            <el-button
              class="btn-row-other"
              type="primary"
              plain
              @click="menu(scope.row)"
            >
              菜单分配
            </el-button>
          </template>
        </pub-table>
        <pub-pagination
          :total="total"
          v-model:page="state.searchForm.pageNum"
          v-model:limit="state.searchForm.pageSize"
          @pagination="getPageData"
        />
      </div>
    </div>
    <!-- 添加/编辑弹窗 -->
    <pub-dialog
      v-if="dialogFormVisible_add"
      :title="popTitle"
      v-model:visible="dialogFormVisible_add"
      width="1000px"
    >
      <!-- ref="dialogEdit" -->
      <dialogEdit
        @close="close"
        @submitForm="submitForm"
        :editData="editData"
        :isEdit="isEdit"
      ></dialogEdit>
    </pub-dialog>
    <!-- 菜单分配弹窗 -->
    <pub-dialog
      v-if="dialogFormVisible_menu"
      :title="popTitle"
      v-model:visible="dialogFormVisible_menu"
      width="1000px"
      style="height: 95%"
    >
      <menu-tree-pop
        ref="menuTreePopRef"
        @close="close"
        @submitForm="menuSaveSubmit"
        :RoleId="RoleId"
      ></menu-tree-pop>
    </pub-dialog>
  </div>
</template>
<script>
export default {
  name: 'roleList'
}
</script>
<script setup>
import dialogEdit from './add.vue'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'
import {
  addRoles,
  editRoles,
  deleteRoles,
  getRolesInfo,
  getRolesList,
  updateRolesBind,
  getRolesBind,
  enableRoles
} from '@/api/system'

import MenuTreePop from './menuTreePop.vue'
const menuTreePopRef = ref()
const RoleId = ref('')
const editData = ref({})
const popTitle = ref('')
const isEdit = ref(false)
const switchState = ref(false)
const editId = ref('')
const dialogFormVisible_menu = ref(false)
const dialogFormVisible_add = ref(false)
const tableLoading = ref(false)
const total = ref(0)
const tableData = ref([])
const columns = ref([
  { label: '角色名称', prop: 'name' },
  { label: '角色编号', prop: 'code' },
  { label: '是否禁用', type: 'switch', prop: 'status' },
  {
    label: '更新时间',
    prop: 'modifyDate'
  },
  { label: '操作', type: 'option', width: '220' }
])
const state = reactive({
  searchColumns: [
    {
      label: '角色名称',
      el: 'Input',
      bind: 'name',
      defaultValue: '',
      labelWidth: 80
    },
    {
      label: '角色编号',
      el: 'Input',
      bind: 'code',
      defaultValue: '',
      labelWidth: 80
    }
  ],
  searchForm: {
    pageSize: 15,
    pageNum: 1
  }
})

onMounted(() => {
  getPageData()
})

const beforeChangeColumn = () => {
  switchState.value = true
  return switchState.value
}
const menuSaveSubmit = val => {
  console.log('val', val)
  updateRolesBind(val)
    .then(result => {
      if (result.succeed) {
        fetchList()
        close()
        menuTreePopRef.value.loadClose()
        ElMessage({
          type: 'success',
          message: result.msg
        })
      }
    })
    .catch(err => {
      menuTreePopRef.value.loadClose()
    })
}

const menu = row => {
  RoleId.value = row.id
  popTitle.value = '分配菜单'
  dialogFormVisible_menu.value = true
}

const changeStatus = row => {
  if (switchState.value) {
    const params = {
      id: row.id,
      status: row.status
    }
    enableRoles(row.id, params).then(result => {
      if (result.succeed) {
        getPageData()
        ElMessage({
          type: 'success',
          message: result.msg
        })
      }
    })
  }
}

const fetchList = () => {
  state.searchForm.pageNum = 1
  getPageData()
}

const getPageData = () => {
  tableLoading.value = true
  getRolesList(state.searchForm).then(res => {
    tableLoading.value = false
    tableData.value = res.data
    total.value = res.total
  })
}

const add = row => {
  popTitle.value = '新增角色'
  dialogFormVisible_add.value = true
  isEdit.value = false
}

const edit = row => {
  console.log(row)
  popTitle.value = '编辑角色'
  editData.value = JSON.parse(JSON.stringify(row))
  dialogFormVisible_add.value = true
  isEdit.value = true
}

const close = () => {
  editId.value = ''
  dialogFormVisible_add.value = false
  dialogFormVisible_menu.value = false
}

const del = row => {
  console.log(row)
  ElMessageBox.confirm('确认删除选择的记录?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    confirmButtonClass: 'btn-row-edit',
    cancelButtonClass: 'btn-row-close',
    type: 'warning'
  })
    .then(() => {
      deleteRoles(row.id).then(result => {
        if (result.succeed) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          fetchList()
        }
      })
    })
    .catch(() => {})
}

const submitForm = async fromdata => {
  try {
    if (isEdit.value) {
      // 修改角色
      const res = await editRoles(fromdata)
      if (res.succeed) {
        ElMessage({
          type: 'success',
          message: '修改成功'
        })
      }
    } else {
      // 新增角色
      const res = await addRoles(fromdata)
      if (res.succeed) {
        ElMessage({
          type: 'success',
          message: '添加成功'
        })
      }
    }
    isEdit.value = false
    await close()
    await fetchList()
  } catch (error) {
    console.log('error', error)
  }
  // this.$refs.dialogEdit.loadClose()
}
</script>
<style lang="scss" scoped>
.table-container {
  height: calc(100% - 90px);
}
</style>
